<template>
	<view class="tabs">
		<view class="page-header">
			<view class="page-header-wrapper" style="position: absolute; z-index: 100; width: 100%">
				<view class="page-header-left"><uni-icons type="scan" color="#fafafa" size="25" /></view>
				<view class="page-header-center"><text @click="toUrl('/pages/search/search')"
						class="search-input">输入关键字搜索</text></view>
				<view class="page-header-right" @click="toUrl('/pages/list/create')">
					<uni-icons type="camera" color="#fafafa" size="25" />
					<text class="contribute-text">发布</text>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<u-swiper :list="list" class="U-swiper" :height="500"></u-swiper>
		<u-tabs-swiper ref="tabs1" :list="tabBars" :current="tabIndex" :scroll-x="true" @change="ontabtap"
			:is-scroll="false" swiperWidth="750"></u-tabs-swiper>

		<view class="line-h"></view>

		<swiper :current="tabIndex" class="swiper-box" style="flex: 1" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab, index1) in newsList" :key="index1">
				<!-- #ifdef APP-NVUE -->

				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<!-- <view class="homeInfo">
					<view class="scroll">
						<scroll-view class="list_scroll" scroll-y="true">
							<view class="">
								<view class="scroll-v list" enableBackToTop="true" scroll-y
									@scrolltolower="loadMore(index1)">
									<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
										<media-item :options="newsitem" @close="close(index1, index2)"
											@click="goDetail(newsitem)"></media-item>
									</view>
									<view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
										<text class="loading-more-text">{{ tab.loadingText }}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view> -->
				<view class="article-all">
					<view class="scrol" v-for="(item,index) in imagestic" @click="sklp()">
						<view class="scrol-left">
							<img class="scrol-left-img" :src="item.image_url">
						</view>
						<view class="scrol-right">
							<view class="scrol-right-text">
								<h3>新闻标题</h3>
							</view>
							<view class="scrol-right-texttwo">
								2023年6月18日12:47:06
							</view>
							<view class="scrol-right-textthree">
								新闻简介，新闻简介，新闻简介，新闻简介
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</swiper-item>
		</swiper>
		<!-- 加载更多 -->
		<!-- <u-loadmore
      bg-color="rgb(240, 240, 240)"
      :status="loadStatus"
      @loadmore="addRandomData"
    ></u-loadmore> -->
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import mediaItem from './news-item.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	// 缓存每页最多
	const MAX_CACHE_DATA = 100
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3

	const newsData = {
		data0: {
			datetime: '40分钟前',
			article_type: 0,
			title: 'uni-app行业峰会频频亮相，开发者反响热烈!',
			source: 'DCloud',
			comment_count: 639,
			isVideo: false
		},
		data1: {
			datetime: '一天前',
			article_type: 1,
			title: 'DCloud完成B2轮融资，uni-app震撼发布!',
			image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
			source: 'DCloud',
			comment_count: 11395,
			isVideo: false
		},
		data2: {
			datetime: '一天前',
			article_type: 2,
			title: '中国技术界小奇迹：HBuilder开发者突破200万',
			image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
			source: 'DCloud',
			comment_count: 11395,
			isVideo: false
		},
		data3: {
			article_type: 3,
			image_list: [{
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
					width: 563,
					height: 316
				},
				{
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
					width: 641,
					height: 360
				},
				{
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
					width: 640,
					height: 360
				}
			],
			datetime: '5分钟前',
			title: 'uni-app 支持使用 npm 安装第三方包，生态更趋丰富',
			source: 'DCloud',
			comment_count: 11,
			isVideo: false
		},
		data4: {
			datetime: '2小时前',
			article_type: 4,
			title: 'uni-app 支持原生小程序自定义组件，更开放、更自由',
			image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
			source: 'DCloud',
			comment_count: 69,
			isVideo: true
		}
	}

	// 初始化ref
	const tabBars = ref([{
			name: '内科急救',
			id: 'guanzhu'
		},
		{
			name: '外科急救',
			id: 'tuijian'
		},
		{
			name: '儿科急救',
			id: 'tiyu'
		},
		{
			name: '妇产科急救',
			id: 'redian'
		},
		{
			name: '心脑血管科急救',
			id: 'caijing'
		},
		{
			name: '骨科急救',
			id: 'yule'
		},
		{
			name: '军事',
			id: 'junshi'
		}
	])
	const newsList = ref([])
	const tabIndex = ref(0)
	const lastIndex = ref(0)
	const scrollInto = ref('')
	const pulling = ref(false)
	const navigateFlag = ref(false)
	const showTips = ref(false)
	const cacheTab = ref([])
	const list = ref([{
			image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			title: '昨夜星辰昨夜风，画楼西畔桂堂东'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
			title: '身无彩凤双飞翼，心有灵犀一点通'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
		}
	])
	const refreshIcon = ref(
		''
	)
	const imagestic = {
		data: {
			image_url: 'https://pic2.zhimg.com/v2-696b347aa5b02a943706d5de13dc6ec1_r.jpg',
			dateTitle: '活动1',
			dateTime: "2023年6月18日01:06:52",
			datePlace: "XXXX小学",
			dateDescribe: "XXXX",
			dateAwait: "01:08:39"
		}
	}
	onMounted(() => {
		setTimeout(() => {
			tabBars.value.forEach(() => {
				newsList.value.push({
					data: [],
					isLoading: false,
					refreshText: '',
					loadingText: '加载更多...'
				})
			})
			getList(0)
		}, 350)
	})

	// methods
	const isScroll = (index) => {
		return tabIndex.value == index
	}

	const goDetail = (item, index) => {
		const data = {
			id: index,
			title: item.title,
			author: '详情',
			time: item.datetime
		}
		const url = item.isVideo == true ? 'videoDetails' : 'details'
		uni.navigateTo({
			url: `/pages/details/${url}?data=${JSON.stringify(data)}`
		})
	}

	const sklp = () => {
		uni.navigateTo({
			url: `/pages/details/details`
		})
	}

	const getList = (index) => {
		const activeTab = newsList.value[index]
		const list = []
		for (let i = 1; i <= 10; i++) {
			const item = {
				...newsData[`data${Math.floor(Math.random() * 5)}`]
			}
			item.id = newGuid()
			list.push(item)
		}
		activeTab.data = activeTab.data.concat(list)
	}

	const close = (index1, index2) => {
		uni.showModal({
			content: '是否删除本条信息？',
			success: (res) => {
				if (res.confirm) {
					newsList.value[index1].data.splice(index2, 1)
				}
			}
		})
	}

	const loadMore = () => {
		setTimeout(() => {
			getList(tabIndex.value)
		}, 500)
	}

	const ontabtap = (e) => {
		// const index = e.target.dataset.current || e.currentTarget.dataset.current

		switchTab(e)
	}

	const ontabchange = (e) => {
		const index = e.target.current || e.detail.current
		switchTab(index)
	}

	const switchTab = (index) => {
		if (newsList.value[index].data.length === 0) {
			console.log('1111')
			getList(index)
		}

		if (tabIndex.value === index) {
			console.log('2222')
			return
		}

		// 缓存 tabId
		if (newsList.value[tabIndex.value].data.length > MAX_CACHE_DATA.value) {
			const isExist = cacheTab.value.indexOf(tabIndex.value)
			if (isExist < 0) {
				cacheTab.value.push(tabIndex.value)
			}
		}

		tabIndex.value = index

		if (tabIndex.value < 5 && lastIndex.value < tabIndex.value) {
			lastIndex.value = tabIndex.value
			return
		}
		if (index >= 5) {
			scrollInto.value = tabBars.value[index - 5].id
		}

		lastIndex.value = tabIndex.value

		// 释放 tabId
		if (cacheTab.value.length > MAX_CACHE_PAGE.value) {
			const cacheIndex = cacheTab.value[0]
			clearTabData(cacheIndex)
			cacheTab.value.splice(0, 1)
		}
	}

	const clearTabData = (e) => {
		newsList.value[e].data.length = 0
		newsList.value[e].loadingText = '加载更多...'
	}
	console.log(newsList.value)
	const refreshData = () => {}

	const onrefresh = () => {
		const tab = newsList.value[tabIndex.value]
		if (!tab.refreshFlag) {
			return
		}
		tab.refreshing = true
		tab.refreshText = '正在刷新...'

		setTimeout(() => {
			refreshData()
			pulling.value = true
			tab.refreshing = false
			tab.refreshFlag = false
			tab.refreshText = '已刷新'
			setTimeout(() => {
				pulling.value = false
			}, 500)
		}, 2000)
	}

	const onpullingdown = (e) => {
		const tab = newsList.value[tabIndex.value]
		if (tab.refreshing || pulling.value) {
			return
		}
		if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
			tab.refreshFlag = true
			tab.refreshText = '释放立即刷新'
		} else {
			tab.refreshFlag = false
			tab.refreshText = '下拉可以刷新'
		}
	}

	const newGuid = () => {
		const s4 = () => {
			return ((65536 * (1 + Math.random())) | 0).toString(16).substring(1)
		}
		return `${s4() + s4()}-${s4()}-4${s4().substr(
    0,
    3
  )}-${s4()}-${s4()}${s4()}${s4()}`.toUpperCase()
	}
</script>

<style>
	.homeInfo {
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;

		.scroll {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;

			.list_scroll {
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
	}

	.U-swiper {
		/* height: 600rpx; */
	}

	.imgplay {
		text-align: center;
		width: 40px;
	}

	.imgplay .icon {
		color: #ffffff;
		font-size: 120rpx;
	}

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* 顶部标题栏 */
	.page-header {
		display: block;
		background-color: #2979ff;
	}

	.page-header-wrapper {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* #ifdef APP-PLUS */
		height: var(--status-bar-height);
		/* #endif */
		padding: 20upx 10upx 15upx 10upx;
		/* background-color: #ec706b; */
		/* margin-top: 30px; */
	}

	.page-header-left {
		opacity: 0.9;
		float: left;
		padding-top: 20px;
	}

	.page-header-center {
		flex: 1;
		padding: 0px 30px 0 20px;
		text-align: center;
	}

	.search-input {
		height: 40px;
		font-size: 14px;
		color: #999999;
		text-align: center;
		line-height: 70upx;
		border-radius: 100px;
		background-color: #fff;
		padding-top: 10upx;
		padding-bottom: 10upx;
		margin-top: 60upx;
	}

	.page-header-right {
		width: 63upx;
		align-items: center;
		float: right;
		padding-top: 60upx;
	}

	.contribute-text {
		font-size: 32upx;
		color: #fff;
	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		position: relative;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #ec706b;
	}

	.underlinebox {
		height: 3px;
		display: flex;
		align-content: center;
		justify-content: center;
		transition: 0.5s;
		height: 4px;
		background-color: #ec706b;
		margin-top: -10px;
	}

	.underlinebox-active {
		background-color: none;
	}

	.swiper-box {
		flex: 1;
		height: 700rpx;
		overflow: hidden;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.update-tips {
		position: absolute;
		left: 0;
		top: 41px;
		right: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #fddd9b;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.update-tips-text {
		font-size: 14px;
		color: #ffffff;
	}

	.refresh {
		width: 750rpx;
		height: 64px;
		justify-content: center;
	}

	.refresh-view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 30px;
		height: 30px;
		transition-duration: 0.5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}

	::v-deep .swiper-box[data-v-2c5296db] {
		height: 27.875rem;
	}

	.article-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
		flex: 1;

		.scrol {
			width: 95%;
			display: flex;
			margin-top: .5rem;
			margin-bottom: .5rem;
			border-radius: 5px;
			box-shadow: 0 0px 0 1.5px #e8e8e8;

			.scrol-left {
				width: 40%;
				height: 100%;

				.scrol-left-img {
					border-radius: 5px 0 0 5px;
					width: 100%;
					height: 100%;
				}
			}

			.scrol-right {
				width: 60%;

				.scrol-right-text {
					padding: 5px 10px;
					text-align: left;
					color: black;
				}

				.scrol-right-texttwo {
					padding: 5px 10px;
					text-align: left;
					font-size: .3rem;
				}

				.scrol-right-textthree {
					padding: 5px 10px;
					text-align: left;
					font-size: .8rem;
				}
			}
		}
	}
</style>